<div class="pm_modal {{ctrl.class}} domains" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <button type="button" ng-click="ctrl.close()" aria-hidden="true" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <domains-menu-step></domains-menu-step>
                <span ng-show="ctrl.domain.VerifyState === 0" class="pull-right pm_badge error" translate translate-comment="Verification status badge"  translate-context="configuration status badge">Not set</span>
                <span ng-show="ctrl.domain.VerifyState === 1" class="pull-right pm_badge error" translate translate-comment="Verification status badge" translate-context="MX configuration status badge">Not set properly</span>
                <span ng-show="ctrl.domain.VerifyState === 2" class="pull-right pm_badge success" translate  translate-context="MX configuration status badge"translate-comment="Verification status badge">Good</span>
                <h4 class="modal-title">2. <span translate translate-context="Title">Verify</span> (<em translate-context="MX configuration status badge" translate>Required</em>)</h4>
            </div>
            <div class="modal-body pm_form">
                <div>
                    <p translate translate-context="Info">For security reasons, we need to verify that you are the owner of your domain. Please add the following code into your DNS record. <strong>Do not remove it even after successful verification</strong>. This can typically be done in the control panel of your domain name registrar.</p>
                    <p translate translate-context="Info">Please add the following TXT record:</p>
                    <p><a target='_blank' href='https://protonmail.com/support/knowledge-base/dns-records/' translate translate-context="Action">Learn more</a></p>
                    <div class="pm_table">
                        <table class="record">
                            <tr>
                                <th scope="col" style="width:3rem" translate translate-context="Title">Type</th>
                                <th scope="col" style="width:6.5rem" translate translate-context="Title">Host name</th>
                                <th scope="col" style="width: 14rem" translate translate-context="Title">Value / Data / Points to</th>
                            </tr>
                            <tr>
                                <td><code>TXT</code></td>
                                <td><code>@</code></td>
                                <td><code>{{ ctrl.domain.VerifyCode }}</code></td>
                            </tr>
                        </table>
                    </div>

                    <p class="alert alert-info" translate translate-context="Info">It can take up to a day for DNS changes to update.</p>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="pm_button modal-footer-button" ng-click="ctrl.close()" translate translate-context="Action">Close</button>
            <button ng-show="ctrl.domain.VerifyState === 0 || ctrl.domain.VerifyState === 1" class="pm_button primary modal-footer-button" ng-click="ctrl.submit()" translate translate-context="Action">Verify</button>
            <button ng-show="ctrl.domain.State > 0" class="pm_button primary modal-footer-button" ng-click="ctrl.next()" translate translate-context="Action">Next</button>
        </div>
    </div>
    <div class="modal-overlay"></div>
</div>
